<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="s" uri="http://www.sweet.org/tags" %>

<!-- Logo区块 -->
<div class="navbar-header {{app.settings.navbarHeaderColor}}">
	<!-- 兼容移动布局：在移动屏幕下导航中仅出现以下两个操作按钮 -->
	<button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
		<i class="glyphicon glyphicon-cog"></i>
	</button>
	<button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
		<i class="glyphicon glyphicon-align-justify"></i>
	</button>
	<!-- logo -->
	<a href="#/" class="navbar-brand text-lt"> <i class="fa fa-btc"></i>
		<img src="<s:url value='/resources/images/logo.png'/>" alt="." class="hide"><span class="hidden-folded m-l-xs">{{app.name}}</span>
	</a>
</div>
<!-- /Logo区块 -->

<!-- 可折叠区块，在移动布局下不可见 -->
<div class="collapse pos-rlt navbar-collapse box-shadow {{app.settings.navbarCollapseColor}}">

	<!-- 操作按钮区：菜单栏折叠开关，个人头像开关 -->
	<div class="nav navbar-nav hidden-xs">
		<a class="btn no-shadow navbar-btn" ng-click="app.settings.asideFolded = !app.settings.asideFolded">
			<i class="fa {{app.settings.asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
		</a> 
		<a class="btn no-shadow navbar-btn" ui-toggle-class="show" target="#aside-user"> 
			<i class="icon-user fa-fw"></i>
		</a>
	</div>

	<!-- 下拉及链接区域 -->
	<ul class="nav navbar-nav hidden-sm">
		<li class="dropdown pos-stc" dropdown>
			<a class="dropdown-toggle" dropdown-toggle> Apps <span class="caret"></span></a>
			<div class="dropdown-menu wrapper w-full bg-white">
				<div class="row">
					<div class="col-sm-4">
                  		<div class="m-l-xs m-t-xs m-b-xs font-bold">Pages <span class="badge badge-sm bg-success">10</span></div>
                		<div class="row">
                  			<div class="col-xs-6">
		                      	<ul class="list-unstyled l-h-2x">
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Profile</a></li>
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Post</a></li>
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Search</a></li>
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Invoice</a></li>
		                      	</ul>
                  			</div>
                  			<div class="col-xs-6">
			                    <ul class="list-unstyled l-h-2x">
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Price</a></li>
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Lock screen</a></li>
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign in</a></li>
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign up</a></li>
			                    </ul>
                  			</div>
                		</div>
                  	</div>
                  	<div class="col-sm-4 b-l b-light">
                  		<div class="m-l-xs m-t-xs m-b-xs font-bold">UI Kits <span class="label label-sm bg-primary">12</span></div>
                  		<div class="row">
                    		<div class="col-xs-6">
                      			<ul class="list-unstyled l-h-2x">
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Buttons</a></li>
			                        <li><a ><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Icons <span class="badge badge-sm bg-warning">1000+</span></a></li>
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Grid</a></li>
			                        <li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Widgets</a></li>
                      			</ul>
                    		</div>
                    		<div class="col-xs-6">
	                      		<ul class="list-unstyled l-h-2x">
	                        		<li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Bootstap</a></li>
	                        		<li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sortable</a></li>
	                        		<li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Portlet</a></li>
	                        		<li><a><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Timeline</a></li>
	                      		</ul>
	                    	</div>
                  		</div>
                	</div>
                	<div class="col-sm-4 b-l b-light">
                  		<div class="m-l-xs m-t-xs m-b-sm font-bold">Analysis</div>
                  		<div class="text-center"><div class="inline">
		                      <div ui-jq="easyPieChart" ui-options="{
		                          percent: 65,
		                          lineWidth: 50,
		                          trackColor: '{{app.color.light}}',
		                          barColor: '{{app.color.info}}',
		                          scaleColor: false,
		                          size: 100,
		                          rotate: 90,
		                          lineCap: 'butt',
		                          animate: 2000
		                        }">
		                      </div>
                    	</div></div>
                	</div>
                </div>
			</div>
		</li>
		<li class="dropdown" dropdown>
			<a class="dropdown-toggle" dropdown-toggle> <i class="fa fa-fw fa-plus visible-xs-inline-block"></i> New <span class="caret"></span></a>
			<ul class="dropdown-menu" role="menu">
				<li><a href="#">Projects</a></li>
				<li><a><span class="badge bg-info pull-right">5</span>Task</a></li>
				<li><a>User</a></li>
				<li class="divider"></li>
				<li><a> <span class="badge bg-danger pull-right">4</span>Email</a></li>
			</ul>
		</li>
	</ul>

	<!-- 全局搜索框 -->
	<form class="navbar-form navbar-form-sm navbar-left shift" ui-shift="prependTo" target=".navbar-collapse" role="search" ng-controller="SearchController">
	    <div class="form-group"><div class="input-group">
	        <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control input-sm bg-light no-border rounded padder" placeholder="Key words...">
	        <span class="input-group-btn">
	          <button type="submit" class="btn btn-sm bg-light rounded"><i class="fa fa-search"></i></button>
	        </span>
	    </div></div>
    </form>

	<!-- 右侧登录信息 -->
	<ul class="nav navbar-nav navbar-right">
	
		<li class="hidden-xs"><a ui-fullscreen></a></li>
		
		<li class="dropdown" dropdown>
			<a class="dropdown-toggle" dropdown-toggle><i class="icon-bell fa-fw"></i> 
				<span class="visible-xs-inline"> Notifications</span> <!-- 移动视图下显示 -->
				<span class="badge badge-sm up bg-danger pull-right-xs">2</span>
			</a> 
			<!-- 下拉区域  -->
			<div class="dropdown-menu w-xl animated fadeInUp">
				<div class="panel bg-white">
					<div class="panel-heading b-light bg-light">
						<strong>You have <span>2</span> notifications </strong>
					</div>
					<div class="list-group">
						<a class="media list-group-item"> 
							<span class="pull-left thumb-sm"><img src="<s:url value='/resources/images/a0.jpg'/>" alt="..." class="img-circle"></span> 
							<span class="media-body block m-b-none"> your workflow complated<br> <small class="text-muted">10 minutes ago</small></span>
						</a> 
						<a class="media list-group-item"> 
							<span class="media-body block m-b-none">Sweet 1.0 initial released<br>
								<small class="text-muted">1 hour ago</small>
							</span>
						</a>
					</div>
					<div class="panel-footer text-sm">
						<a class="pull-right"><i class="fa fa-cog"></i></a> 
						<a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
					</div>
				</div>
			</div>
		</li>
		
		<li class="dropdown" dropdown>
			<a class="dropdown-toggle clear" dropdown-toggle> 
				<span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm"><img src="<s:url value='/resources/images/a0.jpg'/>" alt="..."></span> 
				<span class="hidden-sm hidden-md">Mr . ${usercode}</span> <b class="caret"></b>
			</a> 
			<!-- 下拉区域 -->
			<ul class="dropdown-menu animated fadeInRight w">
				<li class="wrapper b-b m-b-sm bg-light m-t-n-xs">
					<div>
						<p>300mb of 500mb used</p>
					</div> <progressbar value="60" class="progress-xs m-b-none bg-white"></progressbar>
				</li>
				<li><a ui-sref="lockscreen"><span>Lock sreen</span></a></li>
				<li><a ui-sref="app.profile"><span class="label bg-info pull-right">new</span>Profile</a></li>
				<li class="divider"></li>
				<li><a href="<s:url value='/logout'/>">Logout</a></li>
			</ul>
		</li>
		
	</ul>

</div>
<!-- /可折叠区块 -->